<template>
    <div class="app-container">
        <!-- 主体 start -->
        <el-container>
            <el-main height>
                <!-- 表格 start -->
                <el-table
                    border
                    :data="list"
                    v-loading="loading"
                    style="width: 100%;margin-top:30px"
                >
                    <el-table-column align="center" label="轮播图">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title trigger="hover">
                                <img
                                    :src="'https://api.autoapibot.com/' + scope.row"
                                    alt
                                    style="height: 150px;"
                                />
                                <img
                                    slot="reference"
                                    :src="'https://api.autoapibot.com/' + scope.row"
                                    style="height: 80px;"
                                />
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="200px">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="showPupop(scope.row,scope.$index)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 表格 end -->
                <el-row :gutter="20">
                    <el-col :span="20" :offset="0">
                        <el-form
                            ref="elForm"
                            :model="formData"
                            :rules="rules"
                            size="medium"
                            label-width="200px"
                            label-position="left"
                        >
                            <el-form-item label="提现手续费" prop="WithdrawalServiceCharge">
                                <el-input
                                    v-model="formData.WithdrawalServiceCharge"
                                    placeholder="请输入提现手续费"
                                    clearable
                                    :style="{width: '100%'}"
                                >
                                    <template slot="append">%</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="客服二维码地址" prop="KfQrCodeUrl">
                                <el-upload
                                    v-if="!formData.KfQrCodeUrl"
                                    ref="upload"
                                    list-type="picture-card"
                                    accept=".png, .jpg, .pneg, .jpeg"
                                    action
                                    :show-file-list="false"
                                    :http-request="uploadFileImg"
                                >
                                    <i class="el-icon-plus" />
                                </el-upload>
                                <div
                                    v-if="formData.KfQrCodeUrl"
                                    class="el-upload-list el-upload-list--picture-card"
                                >
                                    <div tabindex="0" class="el-upload-list__item is-ready">
                                        <img
                                            :src="'https://api.autoapibot.com/'+formData.KfQrCodeUrl"
                                            alt
                                            class="el-upload-list__item-thumbnail"
                                        />
                                        <a class="el-upload-list__item-name">
                                            <i class="el-icon-document" />
                                        </a>
                                        <label class="el-upload-list__item-status-label">
                                            <i class="el-icon-upload-success el-icon-check" />
                                        </label>
                                        <span class="el-upload-list__item-actions">
                                            <!-- 删除图片 -->
                                            <span
                                                class="el-upload-list__item-delete"
                                                @click="deleteImg"
                                            >
                                                <i class="el-icon-delete" />
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="公司Trc 钱包 Base58 地址" prop="IncTrcBase58Address">
                                <el-input
                                    v-model="formData.IncTrcBase58Address"
                                    placeholder="请输入公司Trc 钱包 Base58 地址"
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="公司Trc 钱包 Hex 地址" prop="IncTrcHexAddress">
                                <el-input
                                    v-model="formData.IncTrcHexAddress"
                                    placeholder="请输入公司Trc 钱包 Hex 地址"
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="公司Trc 钱包 私钥" prop="IncTrcPrivateKey">
                                <el-input
                                    v-model="formData.IncTrcPrivateKey"
                                    placeholder="请输入公司Trc 钱包 私钥"
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="公司Trc 钱包 公钥 " prop="IncTrcPublicKey">
                                <el-input
                                    v-model="formData.IncTrcPublicKey"
                                    placeholder="请输入公司Trc 钱包 公钥 "
                                    clearable
                                    type="textarea"
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="公司Trc 钱包 总钱包地址" prop="IncTrcSaveAddress">
                                <el-input
                                    v-model="formData.IncTrcSaveAddress"
                                    placeholder="请输入公司Trc 钱包 总钱包地址"
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="Trc余额（请不要设置为0）" prop="IncTrcSaveBalance">
                                <el-input
                                    v-model="formData.IncTrcSaveBalance"
                                    placeholder="请输入Trc余额（请不要设置为0）"
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="App 版本号" prop="VersionCode">
                                <el-input
                                    v-model="formData.VersionCode"
                                    placeholder="请输入App 版本号"
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="App 版本名称" prop="VersionName">
                                <el-input
                                    v-model="formData.VersionName"
                                    placeholder="请输入App 版本名称"
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="App 版本信息 " prop="VersionInfo">
                                <el-input
                                    v-model="formData.VersionInfo"
                                    placeholder="请输入App 版本信息 "
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="App 是否强制更新" prop="ForceUpdate">
                                <el-switch
                                    v-model="formData.ForceUpdate"
                                    active-text="是"
                                    inactive-text="否"
                                ></el-switch>
                            </el-form-item>
                            <el-form-item label="App 版本下载地址" prop="DownLoadUrl">
                                <el-input
                                    v-model="formData.DownLoadUrl"
                                    placeholder="请输入单行文本App 版本下载地址"
                                    clearable
                                    :style="{width: '100%'}"
                                ></el-input>
                            </el-form-item>
                            <el-form-item size="large">
                                <el-button type="primary" @click="submitForm">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
        <!-- 主体 end -->
        <!-- 查看弹窗 start -->
        <el-dialog
            title="修改"
            :visible.sync="pupopState"
            :close-on-click-modal="false"
            class="edit-form"
        >
            <el-form label-width="100px">
                <el-form-item label="轮播图">
                    <el-upload
                        v-if="!row"
                        ref="upload"
                        list-type="picture-card"
                        accept=".png, .jpg, .pneg, .jpeg"
                        action
                        :show-file-list="false"
                        :http-request="uploadFileImgwoc"
                    >
                        <i class="el-icon-plus" />
                    </el-upload>
                    <div
                        v-if="row"
                        class="el-upload-list el-upload-list--picture-card"
                    >
                        <div tabindex="0" class="el-upload-list__item is-ready">
                            <img
                                :src="'https://api.autoapibot.com/'+row"
                                alt
                                class="el-upload-list__item-thumbnail"
                            />
                            <a class="el-upload-list__item-name">
                                <i class="el-icon-document" />
                            </a>
                            <label class="el-upload-list__item-status-label">
                                <i class="el-icon-upload-success el-icon-check" />
                            </label>
                            <span class="el-upload-list__item-actions">
                                <!-- 删除图片 -->
                                <span class="el-upload-list__item-delete" @click="deleteImgwoc">
                                    <i class="el-icon-delete" />
                                </span>
                            </span>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="pupopState = false">关 闭</el-button>
                <el-button type="primary" @click="submitForm">确 认</el-button>
            </span>
        </el-dialog>
        <!-- 查看弹窗 end -->
    </div>
</template>

<script>
import { GetAppConfig, UpdateAppConfig } from "../../api/set";
import { Upload } from "../../api/public";
export default {
    data() {
        return {
            formData: {
                WithdrawalServiceCharge: undefined,
                KfQrCodeUrl: undefined,
                IncTrcBase58Address: undefined,
                IncTrcHexAddress: undefined,
                IncTrcPrivateKey: undefined,
                IncTrcPublicKey: undefined,
                IncTrcSaveAddress: undefined,
                IncTrcSaveBalance: undefined,
                VersionCode: undefined,
                VersionName: undefined,
                VersionInfo: undefined,
                ForceUpdate: true,
                DownLoadUrl: undefined,
            },
            rules: {
                WithdrawalServiceCharge: [
                    {
                        required: true,
                        message: "请输入提现手续费",
                        trigger: "blur",
                    },
                ],
                KfQrCodeUrl: [],
                IncTrcBase58Address: [
                    {
                        required: true,
                        message: "请输入公司Trc 钱包 Base58 地址",
                        trigger: "blur",
                    },
                ],
                IncTrcHexAddress: [
                    {
                        required: true,
                        message: "请输入公司Trc 钱包 Hex 地址",
                        trigger: "blur",
                    },
                ],
                IncTrcPrivateKey: [
                    {
                        required: true,
                        message: "请输入公司Trc 钱包 私钥",
                        trigger: "blur",
                    },
                ],
                IncTrcPublicKey: [
                    {
                        required: true,
                        message: "请输入公司Trc 钱包 公钥 ",
                        trigger: "blur",
                    },
                ],
                IncTrcSaveAddress: [
                    {
                        required: true,
                        message: "请输入公司Trc 钱包 总钱包地址",
                        trigger: "blur",
                    },
                ],
                IncTrcSaveBalance: [
                    {
                        required: true,
                        message: "请输入Trc余额（请不要设置为0）",
                        trigger: "blur",
                    },
                ],
                VersionCode: [
                    {
                        required: true,
                        message: "请输入App 版本号",
                        trigger: "blur",
                    },
                ],
                VersionName: [
                    {
                        required: true,
                        message: "请输入App 版本名称",
                        trigger: "blur",
                    },
                ],
                VersionInfo: [
                    {
                        required: true,
                        message: "请输入App 版本信息 ",
                        trigger: "blur",
                    },
                ],
                DownLoadUrl: [
                    {
                        required: true,
                        message: "请输入单行文本App 版本下载地址",
                        trigger: "blur",
                    },
                ],
            },
            //表格参数
            loading: true,
            list: [],
            pupopState: false,
            row: {},
            index:0
        };
    },
    watch: {},
    created() {
        this.getList();
    },
    methods: {
        //获取配置数据
        getList() {
            GetAppConfig().then((res) => {
                if (res.Code == 200) {
                    this.formData = res.Data;
                    this.list = res.Data.Banners.split(",");
                    this.loading = false;
                }
            });
        },
        showPupop(row,index){
          this.index=index;
          this.pupopState=true;
          this.row=row;
        },
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
                this.formData.Banners=this.list.join(',');
                console.log(this.list.join(','));
                UpdateAppConfig(this.formData).then((res) => {
                    if (res.Code == 200) {
                        this.$message({
                            message: "提交成功",
                            type: "success",
                        });
                        this.pupopState=false;
                        this.getList();
                    }
                });
            });
        },

        //上传头像
        uploadFileImg(file) {
            var formData = new FormData();
            formData.append("files", file.file);
            Upload(formData).then((res) => {
                if (res.Code == 200) {
                    this.formData.KfQrCodeUrl = res.Data;
                }
            });
        },
        uploadFileImgwoc(file) {
            var formData = new FormData();
            formData.append("files", file.file);
            Upload(formData).then((res) => {
                if (res.Code == 200) {
                    this.list[this.index]=res.Data;
                    this.row = res.Data;
                }
            });
        },
        //删除头像
        deleteImg() {
            this.formData.KfQrCodeUrl = "";
        },
        deleteImgwoc(){
          this.row = "";
        }
    },
};
</script>
<style>
.box {
    border: 1px solid #ccc;
    padding: 10px 0;
    margin-top: 20px;
}
.title {
    font-weight: bold;
    margin-left: 20px;
    font-size: 20px;
    padding: 20px 0;
}
</style>
